<template>
	<view class="main-box">
		<map class="addressmap" :latitude="latitude" @click="onMapTap" :longitude="longitude" :scale="14"
			:markers="markers" :polyline="polyline" :controls="controls" :style="mapStyle" @markertap="markertap"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				controls: [],
				mapStyle: "width: 100%; height: 100vh;", // 👈 定义 mapStyle
				latitude: 39.904989, // 纬度，浮点数，范围为-90~90
				longitude: 116.405285, // 经度，浮点数，范围为-180~180。
				// 起点/终点标记
				// 标记点（起点 + 终点）
				markers: [{
						id: 1,
						latitude: 39.9087,
						longitude: 116.4170,
						title: "天安门东",
						iconPath: "/static/start.png",
						width: 32,
						height: 32
					},
					{
						id: 2,
						latitude: 39.881332263388515,
						longitude: 116.41073282891102,
						title: "天坛公园",
						iconPath: "/static/end.png",
						width: 32,
						height: 32
					}
				],

				// 路径（多点折线）
				polyline: [{
					points: [{
							latitude: 39.90835951062374,
							longitude: 116.41688948038723
						},
						{
							latitude: 39.90809328856793,
							longitude: 116.41139812105325
						}, // 天安门东
						{
							latitude: 39.88843624990014,
							longitude: 116.41253176690884
						}, // 中间点1
						{
							latitude: 39.88739289970658,
							longitude: 116.41874207980072
						}, // 中间点2
						{
							latitude: 39.886723506291744,
							longitude: 116.41977265422327
						}, // 中间点3
						{
							latitude: 39.883974720020994,
							longitude: 116.42057023518839
						}, // 中间点4
						{
							latitude: 39.883851709052045,
							longitude: 116.41718823831673
						},
						{
							latitude: 39.8816015444357,
							longitude: 116.41759269563056
						},
						{
							latitude: 39.881332263388515,
							longitude: 116.41073282891102
						}
					],
					color: "#008000DD", // 绿色半透明
					width: 5,
					dottedLine: false
				}]
			}
		},
		methods: {
			markertap(e) {
				console.log("点击了 marker：", e.markerId);
			},
			onMapTap(e) {
				console.log(e, '英语')
				// 	// 获取 map 上下文
				// 	const mapCtx = uni.createMapContext("myMap", this);

				// 	// 用 convertViewToLocation 转换点击位置的屏幕坐标 → 经纬度
				// 	mapCtx.convertViewToLocation({
				// 			x: e.detail.x, // 点击的横坐标
				// 			y: e.detail.y, // 点击的纵坐标
				// 		},
				// 		(res) => {
				// 			console.log("点击经纬度：", res);
				// 			this.clickLat = res.latitude;
				// 			this.clickLng = res.longitude;

				// 			this.markers = [{
				// 				id: 1,
				// 				latitude: res.latitude,
				// 				longitude: res.longitude,
				// 				width: 30,
				// 				height: 30,
				// 				iconPath: "/static/location.png",
				// 			}, ];
				// 		}
				// 	);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main-box {
		width: 100%;
		min-height: 100vh;

		.addressmap {
			width: 100%;
			height: 100vh;
		}
	}
</style>